<template>
  <div>
    <div class="header">
      <div class="inputItem">
        <div class="title">供应商名称</div>
        <div class="inputBox">
          <el-input v-model="supplierName" @keyup.enter.native="searchList">
          </el-input>
        </div>
      </div>

      <!-- 查询 -->
      <div class="Btn_grounp" style="margin-left: auto">
        <el-button
          class="searchBtn"
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="initList"
          >查询</el-button
        >
        <el-button
          class="clearBtn"
          type="plain"
          size="small"
          icon="el-icon-refresh-right"
          @click="CleanUp"
          >清空</el-button
        >
      </div>
    </div>

    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%">
          <el-table-column align="left" prop="SerialNumber" label="序号">
          </el-table-column>
          <el-table-column align="left" prop="supplierName" label="供应商名称">
          </el-table-column>
          <el-table-column
            align="left"
            prop="supplierAbbreviation"
            label="累计自营流水"
          >
          </el-table-column>
          <el-table-column align="left" prop="location" label="累计服务费用">
          </el-table-column>
          <el-table-column align="left" prop="headName" label="逾期未缴费用">
          </el-table-column>
          <el-table-column align="left" prop="headTel" label="逾期天数">
          </el-table-column>
          <el-table-column align="left" prop="certStatus" label="开通时间">
          </el-table-column>

          <el-table-column align="left" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  size="small"
                  @click="
                    $router.push(
                      '/supplierManagement/certifiedSupplier/details/' +
                        scope.row.supplierId
                    )
                  "
                  >详情</el-button
                >
                <el-button type="text" size="small">停止服务</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination
          class="pagination"
          background
          layout="slot,prev, pager, next"
          :total="data.total * 1"
          :page-size="data.size * 1"
          :pager-count="5"
          @current-change="changePages($event)"
        >
          <template slot>
            <span
              style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              "
              >共{{ data.total }}条,每页{{ data.size }}条</span
            >
          </template>
        </el-pagination>
      </div>
    </div>
    <div>
      <el-button
        type="text"
        size="small"
        @click="
          $router.push('/financialManagement/paymentRecordsDetails/' + 11)
        "
        >测试详情</el-button
      >
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
export default {
  data() {
    return {
      supplierName: "",
      operateValue: "批量操作", //操作选择
      options: [{ value: "批量操作", label: "批量操作" }],
      records: [],
      data: {},
      pageCurrent: "1",
      size: "2",
    };
  },
  methods: {
    getSerialNumber() {
      // 前端解决序号
      this.records.forEach((item, i) => {
        let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
        item.SerialNumber = num < 10 ? "0" + num : num;
      });
    },

    initList() {
      let params = {
        size: this.size,
        Current: this.pageCurrent,
        supplierName: this.supplierName,
      };
      httpApi.supplierManagementApi
        .getSupplierManagementList(params)
        .then((res) => {
          // console.log('待认证供应商res', res);
          this.records = res.data.data.records;
          this.getSerialNumber();
          // console.log('待认证供应商records', this.records);
          this.data = res.data.data;
          // console.log('待认证供应商data', this.data);
        });
    },
    changePages(val) {
      this.pageCurrent = val;
      this.initList();
    },
    CleanUp() {
      this.supplierName = "";
    },
  },
  mounted() {
    // this.initList()
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;
  margin-bottom: 8px;

  .Btn_grounp {
    display: flex;
    margin-left: 16px;

    .searchBtn {
      width: 80px;
      height: 32px;
      color: #fff;
      font-size: 12px;
    }

    .clearBtn {
      width: 80px;
      height: 32px;
      color: #262626;
      font-size: 12px;
    }
  }

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    > .title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    > .inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  //height: calc(100vh - 250px);
  background-color: #fff;
  padding: 0px 30px 0px 30px;

  .list {
    //height: calc(100% - 31px);
    width: 100%;

    .tag {
      width: 63px;
      height: 28px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background-color: #ecf5fe;
      color: #1890ff;

      &.NoPass {
        color: #f7555d;
        background-color: #fde8e9;
      }

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin-right: 4px;
        background-color: #1890ff;

        &.NoPass {
          background-color: #f7555d;
        }
      }
    }

    ::v-deep .el-table__body-wrapper {
      max-height: calc(100vh - 100px) !important;
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      height: 48px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
        height: 48px;
      }
    }

    .stateBtns {
      height: 30px;
      width: 76px;

      ::v-deep .el-button {
        height: 30px;
        width: 76px;
        font-size: 12px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 30px;
      }

      .waitPass {
        background-color: #ecf5fe;
        color: #1890ff;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 88px;

    .pagination {
      height: 48px;
      display: flex;
      align-items: center;
      margin-left: auto;
    }
  }
}
</style>
